<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>智慧牧场 - 疾病预警系统</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css">
    <link rel="stylesheet" href="../../../assets/module/niuniu/bootstrap.min.css">
    <!--    <link rel="stylesheet" href="../../../assets/module/niuniu/font-awesome.min.css">-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>



    <![endif]-->
    <style>
        :root {
            --alert-critical: #dc3545;
            --alert-warning: #ffc107;
            --alert-normal: #198754;
        }

        .health-status-card {
            transition: transform 0.3s, box-shadow 0.3s;
            border-left: 4px solid transparent;
        }

        .alert-pulse {
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.02); }
            100% { transform: scale(1); }
        }

        .biomarker-chart {
            height: 280px;
            background: rgba(255,255,255,0.9);
            border-radius: 12px;
        }

        .symptom-checklist .form-check-label {
            transition: background-color 0.2s;
        }

        .cow-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-size: cover;
        }
    </style>
</head>
<body class="bg-light">
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
    <div class="container">
        <a class="navbar-brand" href="#">
            <i class="fa-solid fa-cow"></i> 牧场健康监测
        </a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="#">实时预警</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">历史记录</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container py-4">
    <!-- 实时警报面板 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-danger alert-pulse" id="criticalAlert" style="display:none;">
                <div class="card-body py-2">
                    <div class="d-flex align-items-center">
                        <i class="fa-solid fa-bell fa-2x text-danger me-3"></i>
                        <div>
                            <h5 class="mb-0" id="alertTitle"></h5>
                            <small id="alertDetail"></small>
                        </div>
                        <button class="btn btn-link ms-auto" onclick="dismissAlert()">
                            <i class="fa-solid fa-xmark"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主体布局 -->
    <div class="row g-4">
        <!-- 左侧状态列 -->
        <div class="col-lg-4">
            <!-- 个体选择 -->
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title"><i class="fa-solid fa-cow"></i> 奶牛列表</h5>
                    <div class="list-group" id="cowList">
                        <!-- 动态生成 -->
                    </div>
                </div>
            </div>

            <!-- 生命体征仪表盘 -->
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title"><i class="fa-solid fa-heart-pulse"></i> 实时体征</h5>
                    <div class="row g-3" id="vitalSigns">
                        <div class="col-6">
                            <div class="health-status-card p-3 bg-white rounded">
                                <div class="d-flex align-items-center">
                                    <i class="fa-solid fa-temperature-three-quarters fs-2 me-2"></i>
                                    <div>
                                        <div class="text-muted small">体温</div>
                                        <div class="h4 mb-0" id="tempValue">38.5℃</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="health-status-card p-3 bg-white rounded">
                                <div class="d-flex align-items-center">
                                    <i class="fa-solid fa-utensils fs-2 me-2"></i>
                                    <div>
                                        <div class="text-muted small">采食量</div>
                                        <div class="h4 mb-0" id="feedValue">18kg</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="col-lg-8">
            <!-- 健康趋势图 -->
            <div class="card mb-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-3">
                        <h5 class="card-title"><i class="fa-solid fa-wave-pulse"></i> 健康趋势</h5>
                        <div class="btn-group">
                            <button class="btn btn-sm btn-outline-secondary active" data-period="24h">24小时</button>
                            <button class="btn btn-sm btn-outline-secondary" data-period="7d">7天</button>
                        </div>
                    </div>
                    <canvas id="healthChart" class="biomarker-chart"></canvas>
                </div>
            </div>

            <!-- 症状检查表 -->
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-4"><i class="fa-solid fa-clipboard-list"></i> 症状检查表</h5>
                    <div class="row symptom-checklist g-3">
                        <div class="col-md-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="symptom1">
                                <label class="form-check-label w-100 p-2 rounded" for="symptom1">
                                    <i class="fa-solid fa-droplet me-2"></i> 鼻腔分泌物
                                </label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="symptom2">
                                <label class="form-check-label w-100 p-2 rounded" for="symptom2">
                                    <i class="fa-solid fa-weight-scale me-2"></i> 体重下降
                                </label>
                            </div>
                        </div>
                        <!-- 更多症状选项... -->
                    </div>
                    <hr>
                    <button class="btn btn-primary" onclick="analyzeSymptoms()">
                        <i class="fa-solid fa-magnifying-glass-chart me-2"></i> 诊断分析
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" perm-show="cowHealth:edit" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" perm-show="cowHealth:delete" lay-event="delete">删除</a>
</script>
<script src="${ctxPath}/assets/libs/echarts/echarts.min.js"></script>
<script src="${ctxPath}/assets/libs/echarts/echartsTheme.js"></script>
<!--<script src="${ctxPath}/assets/libs/niuniu/jquery-3.7.1.min.js"></script>-->
<script src="${ctxPath}/assets/libs/niuniu/bootstrap.min.js"></script>
<script src="${ctxPath}/assets/libs/niuniu/bootstrap.bundle.min.js"></script>
<!-- js部分 -->
<script src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script src="${ctxPath}/assets/js/common.js"></script>
<script>
    layui.use(['layer', 'table', 'tableX', 'notice', 'xnUtil', 'laydate'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var tableX = layui.tableX;
        var admin = layui.admin;
        var form = layui.form;
        var notice = layui.notice;
        var xnUtil = layui.xnUtil;
        var laydate = layui.laydate;


        /* 渲染表格 */
        var insTb = tableX.render({
            elem: '#dataTable',
            url: getProjectUrl() + 'cowHealth/page',
            page: true,
            toolbar: ['<p>',
                '<button lay-event="add" perm-show="cowHealth:add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                '<button lay-event="delete" perm-show="cowHealth:delete" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>',
                '</p>'].join(''),
            cellMinWidth: 100,
            cols: [
                [
                    {type: 'checkbox'},
                    {field: 'cowId', title: '', sort: true},
                    {field: 'vaccine', title: '疫苗情况', sort: true},
                    {title: '操作', toolbar: '#tableBar', align: 'center', width: 200, minWidth: 200}
                ]
            ],
            done: function(res, curr, count) {
                xnUtil.tableDone(insTb, res, curr, count);
            }
        });

        /* 表格搜索 */
        form.on('submit(tableSearch)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}});
            return false;
        });

        /* 表格工具条点击事件 */
        table.on('tool(dataTable)', function (obj) {
            /* 删除 */
            if (obj.event === 'delete') {
                layer.confirm('确定要操作该数据吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function () {
                    admin.req(getProjectUrl() + 'cowHealth/delete', JSON.stringify([{'id': obj.data.id}]), function(res){
                        layer.msg(res.message, {icon: 1, time: 1000}, function () {
                            insTb.reload();
                        });
                    }, 'post');
                });
            }
            /* 编辑 */
            if (obj.event === 'edit') {
                showAddOrUpdateModel(obj.data);
            }
        });

        /* 表格头工具栏点击事件 */
        table.on('toolbar(dataTable)', function (obj) {
            if (obj.event === 'add') { // 添加
                showAddOrUpdateModel();
            }
            if (obj.event === 'delete') { // 删除
                var checkRows = table.checkStatus('dataTable');
                if (checkRows.data.length === 0) {
                    notice.msg('请选择要操作的数据', {icon: 2});
                    return;
                }
                layer.confirm('确定要操作该数据吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function () {
                    var ids = checkRows.data.map(function (d) {
                        return {"id": d.id};
                    });
                    admin.req(getProjectUrl() + 'cowHealth/delete', JSON.stringify(ids), function(res){
                        layer.msg(res.message, {icon: 1, time: 1000}, function () {
                            insTb.reload();
                        });
                    }, 'post');
                });
            }
        });

        // 显示表单弹窗
        function showAddOrUpdateModel(data) {
            var layIndex = admin.open({
                title: (data ? '修改' : '添加') + '牛牛健康表',
                url: getProjectUrl() + 'cowHealth/form',
                area: ['800px',''],
                data: { data: data },     // 传递数据到表单页面
                end: function () {
                    var layerData = admin.getLayerData(layIndex, 'formOk');
                    if (layerData) {  // 判断表单操作成功标识
                        insTb.reload();  // 成功刷新表格
                    }
                },
                success: function (layero, dIndex) {
                    // 弹窗超出范围不出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    $(layero).find('[lay-submit]').focus();
                }
            });
        }
    });
</script>
</body>
</html>
